<template>
  <div class="category">
    <!-- 搜索框 -->
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />

    <div class="bottom-left">
      <!-- 左侧边栏 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          @click="onChange(item.id)"
          v-for="item in categoryList"
          :key="item.id"
        />
      </van-sidebar>
      <!-- 右边盒子 -->
      <div class="bottom-right">
        <img :src="currentCategory.banner_url" alt="" />
        <p>{{ currentCategory.front_name }}</p>
        <!-- 分割线 -->
        <van-divider
          :hairline="false"
          :style="{ color: '#000', borderColor: '#cccccc', padding: '0 70px' }"
        >
          {{ currentCategory.name }}
        </van-divider>

        <!-- 宫格 -->
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in currentCategory.subCategoryList"
            :key="item.id"
            :icon="item.wap_banner_url"
            :text="item.name"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
// 引入分类页 数据请求
import { getCategoryData, getCurrentCategory } from "@/utils/http.js";

export default {
  name: "Category",
  data() {
    return {
      value: "", // 搜索关键字
      activeKey: 0, // 默认的导航索引
      categoryList: [], // 左侧导航
      currentCategory: {}, // 当前分类
     
    };
  },
  components: {},
  methods: {
    onChange(id) {
      // 切换左边边栏
      // this.activeKey = index;
      getCurrentCategory({ id: id })
        .then((res) => {
          // console.log(res);
          this.currentCategory = res.data.data.currentCategory;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getData() {
      getCategoryData().then((res) => {
        // console.log(res);
        this.categoryList = res.data.data.categoryList;
        this.currentCategory = res.data.data.currentCategory;
      });
    },
  },
  
  created() {
    //    初始化调用
    this.getData();
  },
};
</script>
<style scoped lang='less'>
.bottom-left {
  display: flex;
  .bottom-right {
    flex: 1;
    position: relative;
    img {
      width: 285px;
      height: 140px;
      display: block;
      box-shadow: 0 0 0.16rem #000;
      border-radius: 0.13333rem;
      margin: 0 4px;
      filter: brightness(0.5);
    }
    h3 {
      text-align: center;
    }
    p {
      position: absolute;
      top: 65px;
      left: 30%;
      color: white;
      font-size: 16px;
    }
  }
  /deep/.van-sidebar-item--select {
    color: red;
    font-weight: 500;
  }
}
</style>